<template>
    <div id="SearchView">


        <a-row>
            <a-col :span="3">
                <a-flex gap="middle" vertical>
                    <div id="log" style="height: 100px">
                        <el-image :src="logo" fit="scale-down" style="width: 100%; height: 100%" />
                    </div>
                    <div id="advertisement" style="background: red;height: 500px">
                        广告区
                    </div>
                </a-flex>
            </a-col>
            <a-col :span="21">
                <div id="right">
                    <!--顶部搜索框和导航栏-->
                    <div id="topBar">
                        <TopBarComponent></TopBarComponent>
                    </div>
                    <!--商品检索条件栏-->
                    <div id="productConditionComponent">
                        <ProductConditionComponent v-model:data="productInfo"
                                                   @select="selectCondition"></ProductConditionComponent>
                    </div>
                    <!--商品展示栏-->
                    <ProductDisplayColumnComponent v-model:data="productInfo"
                                                   @select="selectBrand"></ProductDisplayColumnComponent>
                </div>
            </a-col>
        </a-row>


    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import router from "@/router/router.ts";
import { ProductSearchDto, ProductSearchVo, SearchRouterParams } from "@/model/SearchModel.ts";
import { searchProducts } from "@/api/product/SearchApi.ts";
import TopBarComponent from "@/components/TopBarComponent.vue";
import ProductConditionComponent from "@/pages/search/ProductConditionComponent.vue";
import ProductDisplayColumnComponent from "@/pages/search/ProductDisplayColumnComponent.vue";
import logo from "@/assets/img/logo.jpg";
// 路由参数
const routerParams = ref<SearchRouterParams>({
    queryParam: "",
    thirdCatId: 0,
    attrs: [],
    brandId: [],
});
// 搜索结果
const productInfo = ref<ProductSearchVo[]>([]);


/**
 * 选择检索条件
 * @param isSelected 是否选中
 */
const selectCondition = (isSelected: boolean) => {
    getProduct();
};
/**
 * 选择品牌
 * @param isSelected 是否选中
 */
const selectBrand = (isSelected: boolean) => {
    getProduct();
};

/**
 *获取路由参数
 */
const getRouterParams = () => {
    let _routerParams: SearchRouterParams = router.currentRoute.value.query;
    routerParams.value.queryParam = _routerParams.queryParam;
    routerParams.value.thirdCatId = Number(_routerParams.thirdCatId);
    //为了防止出现只有一个attrs时,axios会默认转成string类型而不是数组
    if (typeof _routerParams.attrs == "string") {
        routerParams.value.attrs = [_routerParams.attrs];
    } else {
        routerParams.value.attrs = _routerParams.attrs as string[];
    }
    if (typeof _routerParams.brandId == "string") {
        routerParams.value.brandId = [Number(_routerParams.brandId)];
    } else {
        routerParams.value.brandId = _routerParams.brandId as number[];
    }
};

/**
 *  渲染搜索结果
 */
const getProduct = () => {
    //1. 获取路由参数
    getRouterParams();
    //2 检索商品
    //2.1 构建请求参数
    let requestParams: ProductSearchDto = routerParams.value;
    //2.2 发送请求
    searchProducts(requestParams).then(res => {
        // console.log(res);
        productInfo.value = res.data;
    });
};


// watch(toRef(router.currentRoute.value.query), () => {
//     getProduct();
// }, { deep: true });
/**
 * --------------------------------------------------------------------------------------------------------页面加载完毕
 */
onMounted(() => {
    //1. 初始化搜索结果
    getProduct();
});
</script>

<style lang="scss" scoped>
@import "@/style/variables";

#SearchView {
    #left {
        //order: -1; /* 让这个元素排在最前面 */
        //width: $lift-width;
        #topBar {
            height: $HOME_TOP_HEIGHT;
        }

        #productConditionComponent {
        }
    }

    #right {
        //width: calc(100% - #{$lift-width});
        //height: 100%;
    }

}
</style>